<template>
  <a-form :wrapper-col-props="{ span: 12, offset: 2 }" :label-col-props="{ span: 6 }">
    <a-form-item v-if="currentShape.type !== 'd-barcode'" label="文字">
      <a-input v-model.lazy="currentShape.text" type="text" @change="onChange" />
    </a-form-item>
    <a-form-item label="背景颜色">
      <color-picker v-model="currentShape.bgcolor" @change="onChange"></color-picker>
    </a-form-item>
    <a-form-item label="线条颜色">
      <color-picker v-model="currentShape.textColor" @change="onChange"></color-picker>
    </a-form-item>
    <a-form-item label="旋转">
      <a-switch
        v-model:checked="currentShape.rotate"
        checked-value="90"
        :checked-text="'旋转'"
        :unchecked-text="'正常'"
        unchecked-value="0"
        @change="rotate"
      ></a-switch>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { previewBarCode } from '@/api/modules/utils/utils';
import { currentShape } from '../../../data/shapes';

const onChange = async () => {
  const barcode = await previewBarCode({
    bgcolor: currentShape.value.bgcolor,
    showText: currentShape.value.showText,
    text: currentShape.value.text,
    textColor: currentShape.value.textColor,
    w: currentShape.value.w,
    h: currentShape.value.h,
    margin: currentShape.value.margin,
    rotate: currentShape.value.rotate,
  });
  currentShape.value.src = barcode.data;
};

const rotate = () => {
  if (currentShape.value.rotate === '0') {
    const temp = JSON.stringify(currentShape.value.w);
    currentShape.value.w = Number(JSON.stringify(currentShape.value.h));
    currentShape.value.h = Number(temp);
  } else {
    const temp = JSON.stringify(currentShape.value.h);
    currentShape.value.h = Number(JSON.stringify(currentShape.value.w));
    currentShape.value.w = Number(temp);
  }
  onChange();
};
</script>

<style lang="scss" scoped></style>
